<template>
  <el-dialog @close="scsjtCancel('scsjtRuleForm')" :close-on-click-modal="false" title="上传设计图"
    :visible.sync="scsjtVisible" width="600px">
    <div class="scroll-view">
      <el-form :model="scsjtRuleForm" :rules="scsjtRules" ref="scsjtRuleForm" label-position="top">
        <el-form-item label="平面图 (.jpg,.png,.gif)" prop="plan_drawing_image">
          <el-input style="position: absolute; z-index: 0; top: -999999px"
            v-model="scsjtRuleForm.plan_drawing_image.length"></el-input>
          <div class="file-box">
            <el-upload :show-file-list="false" :auto-upload="false" action="#" class="avatar-uploader" accept="image/*"
              multiple :file-list="scsjtRuleForm.plan_drawing_image" :on-change="(file, fileList) => {
                scsjtFileChange(file, fileList, 'plan_drawing_image');
              }
                ">
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <div class="img-box" v-for="(item, index) in scsjtRuleForm.plan_drawing_image" :key="index">
              <div class="operation-box">
                <i class="iconfont icon-shanchu" @click.stop="scsjtFileRemove(index, 'plan_drawing_image')"></i>
              </div>
              <img class="img-item" :src="item.show" />
            </div>
          </div>
        </el-form-item>
        <el-form-item label="平面图文件 (.dwg,.pdf,.zip,.pptx,.ppt)" prop="plan_drawing">
          <el-input style="position: absolute; z-index: 0; top: -999999px"
            v-model="scsjtRuleForm.plan_drawing.length"></el-input>
          <div class="file-box">
            <el-upload :auto-upload="false" action="#" accept=".dwg,.pdf,.zip,.pptx,.ppt"
              :file-list="scsjtRuleForm.plan_drawing" :on-change="(file, fileList) => {
                scsjtFileChange(file, fileList, 'plan_drawing');
              }
                " :on-remove="(file, fileList) => {
                  scsjtRemove(file, fileList, 'plan_drawing');
                }
                  "><el-button size="small" icon="el-icon-plus">点击上传</el-button>
            </el-upload>
          </div>
        </el-form-item>
        <el-form-item label="效果图 (.jpg,.png,.gif)" prop="effect_drawing_image">
          <el-input style="position: absolute; z-index: 0; top: -999999px"
            v-model="scsjtRuleForm.effect_drawing_image.length"></el-input>
          <div class="file-box">
            <el-upload :show-file-list="false" :auto-upload="false" action="#" class="avatar-uploader" accept="image/*"
              multiple :file-list="scsjtRuleForm.effect_drawing_image" :on-change="(file, fileList) => {
                scsjtFileChange(file, fileList, 'effect_drawing_image');
              }
                ">
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <div class="img-box" v-for="(item, index) in scsjtRuleForm.effect_drawing_image" :key="index">
              <div class="operation-box">
                <i class="iconfont icon-shanchu" @click.stop="scsjtFileRemove(index, 'effect_drawing_image')"></i>
              </div>
              <img class="img-item" :src="item.show" />
            </div>
          </div>
        </el-form-item>
        <el-form-item label="效果图文件 (.zip,.ppt,.ppsx,.pptx,.psd)" prop="effect_drawing">
          <el-input style="position: absolute; z-index: 0; top: -999999px"
            v-model="scsjtRuleForm.effect_drawing.length"></el-input>
          <div class="file-box">
            <el-upload :auto-upload="false" action="#" accept=".zip,.ppt,.ppsx,.pptx,.psd"
              :file-list="scsjtRuleForm.effect_drawing" :on-change="(file, fileList) => {
                scsjtFileChange(file, fileList, 'effect_drawing');
              }
                " :on-remove="(file, fileList) => {
                  scsjtRemove(file, fileList, 'effect_drawing');
                }
                  "><el-button size="small" icon="el-icon-plus">点击上传</el-button>
            </el-upload>
          </div>
        </el-form-item>
        <el-form-item label="施工图 (.jpg,.png,.gif)" prop="construction_drawing_image">
          <el-input style="position: absolute; z-index: 0; top: -999999px"
            v-model="scsjtRuleForm.construction_drawing_image.length"></el-input>
          <div class="file-box">
            <el-upload :show-file-list="false" :auto-upload="false" action="#" class="avatar-uploader" accept="image/*"
              multiple :file-list="scsjtRuleForm.construction_drawing_image" :on-change="(file, fileList) => {
                scsjtFileChange(file, fileList, 'construction_drawing_image');
              }
                ">
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <div class="img-box" v-for="(item, index) in scsjtRuleForm.construction_drawing_image" :key="index">
              <div class="operation-box">
                <i class="iconfont icon-shanchu" @click.stop="
                  scsjtFileRemove(index, 'construction_drawing_image')
                  "></i>
              </div>
              <img class="img-item" :src="item.show" />
            </div>
          </div>
        </el-form-item>
        <el-form-item label="施工图文件 (.zip,.ppt,.ppsx,.pptx,.psd)" prop="construction_drawing">
          <el-input style="position: absolute; z-index: 0; top: -999999px"
            v-model="scsjtRuleForm.construction_drawing.length"></el-input>
          <div class="file-box">
            <el-upload :auto-upload="false" action="#" accept=".zip,.ppt,.ppsx,.pptx,.psd"
              :file-list="scsjtRuleForm.construction_drawing" :on-change="(file, fileList) => {
                scsjtFileChange(file, fileList, 'construction_drawing');
              }
                " :on-remove="(file, fileList) => {
                  scsjtRemove(file, fileList, 'construction_drawing');
                }
                  "><el-button size="small" icon="el-icon-plus">点击上传</el-button>
            </el-upload>
          </div>
        </el-form-item>
        <el-form-item label="其他文件">
          <div class="file-box">
            <el-upload multiple :auto-upload="false" action="#" :file-list="scsjtRuleForm.other_file" :on-change="(file, fileList) => {
              scsjtFileChange(file, fileList, 'other_file');
            }
              " :on-remove="(file, fileList) => {
                  scsjtRemove(file, fileList, 'other_file');
                }
                  "><el-button size="small" icon="el-icon-plus">点击上传</el-button>
            </el-upload>
          </div>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input :rows="4" class="input-box" v-model="scsjtRuleForm.remark" type="textarea"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer">
      <el-button @click="scsjtCancel('scsjtRuleForm')">关闭</el-button>
      <el-button type="primary" @click="scsjtSubmit('scsjtRuleForm')" :disabled="diaLoading" :loading="diaLoading">确
        定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import projectApi from "@/api/projectApi";
import companyApi from "@/api/companyApi";
import adminApi from "@/api/adminApi";
import { getUserInfo } from "@/utils/auth";
import foremanApi from "@/api/foremanApi";
export default {
  name: "",
  props: {
    addDialogVisible: {
      type: Boolean,
      default: false,
      required: false,
    },
    project_id: {
      default: "",
      required: false,
    },
  },
  data() {
    var file1 = (rule, value, callback) => {
      if (!value.length && !this.scsjtRuleForm.plan_drawing.length) {
        callback(new Error("请上传平面图"));
      } else {
        callback();
      }
    };
    var file2 = (rule, value, callback) => {
      if (!value.length && !this.scsjtRuleForm.effect_drawing.length) {
        callback(new Error("请上传效果图"));
      } else {
        callback();
      }
    };
    var file3 = (rule, value, callback) => {
      if (!value.length && !this.scsjtRuleForm.construction_drawing.length) {
        callback(new Error("请上传施工图"));
      } else {
        callback();
      }
    };
    var file4 = (rule, value, callback) => {
      if (!value.length && !this.scsjtRuleForm.plan_drawing_image.length) {
        callback(new Error("请上传平面图文件"));
      } else {
        callback();
      }
    };
    var file5 = (rule, value, callback) => {
      if (!value.length && !this.scsjtRuleForm.effect_drawing_image.length) {
        callback(new Error("请上传效果图文件"));
      } else {
        callback();
      }
    };
    var file6 = (rule, value, callback) => {
      if (
        !value.length &&
        !this.scsjtRuleForm.construction_drawing_image.length
      ) {
        callback(new Error("请上传施工图文件"));
      } else {
        callback();
      }
    };
    return {
      scsjtVisible: false,
      scsjtRuleForm: {
        remark: "",
        plan_drawing_image: [],
        effect_drawing_image: [],
        construction_drawing_image: [],
        plan_drawing: [],
        effect_drawing: [],
        construction_drawing: [],
        other_file: []
      },
      scsjtRules: {
        plan_drawing_image: {
          required: true,
          validator: file1,
          trigger: "change",
        },
        effect_drawing_image: {
          required: true,
          validator: file2,
          trigger: "change",
        },
        construction_drawing_image: {
          required: true,
          validator: file3,
          trigger: "change",
        },
        plan_drawing: {
          required: true,
          validator: file4,
          trigger: "change",
        },
        effect_drawing: {
          required: true,
          validator: file5,
          trigger: "change",
        },
        construction_drawing: {
          required: true,
          validator: file6,
          trigger: "change",
        },
      },
      diaLoading: false,
    };
  },
  watch: {
    addDialogVisible(val1, val2) {
      //   if (this.addDialogVisible) {
      //     this.get_account_manager();
      //   }
      this.$nextTick(() => {
        this.scsjtVisible = this.addDialogVisible;
      });
    },
  },
  computed: {},
  mounted() { },
  methods: {
    // 上传设计图
    scsjtCancel(formName) {
      this.scsjtRuleForm = {
        remark: "",
        plan_drawing_image: [],
        effect_drawing_image: [],
        construction_drawing_image: [],
        plan_drawing: [],
        effect_drawing: [],
        construction_drawing: [],
        other_file: []
      };
      this.$nextTick(() => {
        this.$refs[formName].clearValidate();
        // this.scsjtVisible = false;
        this.$emit("onClose", true);
      });
    },
    scsjtSubmit(formName) {
      let scsjtRuleForm = this.scsjtRuleForm;
      // if (
      //   !scsjtRuleForm.plan_drawing_image.length &&
      //   !scsjtRuleForm.effect_drawing_image.length &&
      //   !scsjtRuleForm.construction_drawing_image.length &&
      //   !scsjtRuleForm.plan_drawing.length &&
      //   !scsjtRuleForm.effect_drawing.length &&
      //   !scsjtRuleForm.construction_drawing.length &&
      //   !scsjtRuleForm.remark
      // ) {
      //   this.$message.warning("请填充设计图内容");
      //   return;
      // }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.diaLoading = true;
          let formdata = new FormData();
          formdata.append(
            "data",
            JSON.stringify({
              remark: scsjtRuleForm.remark,
              project_id: this.project_id,
            })
          );

          scsjtRuleForm.plan_drawing_image.forEach((item) => {
            formdata.append("plan_drawing_image[]", item.raw);
          });
          scsjtRuleForm.effect_drawing_image.forEach((item) => {
            formdata.append("effect_drawing_image[]", item.raw);
          });

          scsjtRuleForm.construction_drawing_image.forEach((item) => {
            formdata.append("construction_drawing_image[]", item.raw);
          });
          scsjtRuleForm.plan_drawing.forEach((item) => {
            formdata.append("plan_drawing[]", item.raw);
          });
          scsjtRuleForm.effect_drawing.forEach((item) => {
            formdata.append("effect_drawing[]", item.raw);
          });
          scsjtRuleForm.construction_drawing.forEach((item) => {
            formdata.append("construction_drawing[]", item.raw);
          });
          scsjtRuleForm.other_file.forEach((item) => {
            formdata.append("other_file[]", item.raw);
          });
          projectApi
            .uploadDesignDrawings(formdata)
            .then((res) => {
              console.log(res, "上传设计图");
              this.diaLoading = false;
              if (res.code == 200) {
                this.$emit("onSuccess", true);
              }
              this.$message({
                type: res.code == 200 ? "success" : "warning",
                message: res.code == 200 ? "处理成功" : res.message,
              });
            })
            .catch((err) => {
              this.diaLoading = false;
              this.$message({
                type: "warning",
                message: err.message,
              });
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    scsjtFileChange(file, fileList, type) {
      console.log(fileList, type);
      let scsjtRuleForm = this.scsjtRuleForm;
      fileList.forEach((item) => {
        item.show = URL.createObjectURL(item.raw);
      });
      switch (type) {
        // 平面图
        case "plan_drawing_image":
          scsjtRuleForm.plan_drawing_image = fileList;
          break;
        // 平面图文件
        case "plan_drawing":
          scsjtRuleForm.plan_drawing = fileList;
          break;
        // 效果图
        case "effect_drawing_image":
          scsjtRuleForm.effect_drawing_image = fileList;
          break;
        // 效果图文件
        case "effect_drawing":
          scsjtRuleForm.effect_drawing = [file];
          break;
        // 施工图
        case "construction_drawing_image":
          scsjtRuleForm.construction_drawing_image = fileList;
          break;
        // 施工图文件
        case "construction_drawing":
          scsjtRuleForm.construction_drawing = [file];
          break;
        // 其他文件
        case "other_file":
          scsjtRuleForm.other_file.push(file);
          break;

        default:
      }
      this.scsjtRuleForm = scsjtRuleForm;
    },
    scsjtFileRemove(index, type) {
      console.log(index, type);
      let scsjtRuleForm = this.scsjtRuleForm;
      switch (type) {
        // 平面图
        case "plan_drawing_image":
          scsjtRuleForm.plan_drawing_image.splice(index, 1);
          break;
        // 效果图
        case "effect_drawing_image":
          scsjtRuleForm.effect_drawing_image.splice(index, 1);
          break;
        // 施工图
        case "construction_drawing_image":
          scsjtRuleForm.construction_drawing_image.splice(index, 1);
          break;
        // 手绘图
        case "sketch_file":
          scsjtRuleForm.sketch_file.splice(index, 1);
          break;
        // 其他文件
        case "other_file":
          scsjtRuleForm.other_file.splice(index, 1);
          break;
        default:
      }
      this.scsjtRuleForm = scsjtRuleForm;
    },
    scsjtRemove(file, list, type) {
      let scsjtRuleForm = this.scsjtRuleForm;
      switch (type) {
        // 平面图文件
        case "plan_drawing":
          scsjtRuleForm.plan_drawing = list;
          break;
        // 效果图文件
        case "effect_drawing":
          scsjtRuleForm.effect_drawing = list;
          break;
        // 施工图文件
        case "construction_drawing":
          scsjtRuleForm.construction_drawing = list;
          break;
        default:
      }
      this.scsjtRuleForm = scsjtRuleForm;
    },
  },
};
</script>
<style lang="scss" scoped>
@import "./index.scss";
</style>